<template>
  <div
    v-if="examTotalDuration"
    class="countdown-wrap"
  >
    <el-icon
      class="mr20"
      size="18"
    >
      <ele-AlarmClock />
    </el-icon>
    {{ $t("rform.gen.endTimeLeft") }}:
    {{ getExamTimeLeft }}
  </div>
</template>
<script setup lang="ts">
import { examDurationHook } from "@/views/formgen/components/GenerateForm/hooks/useExamHook";
import { computed } from "vue";

const props = defineProps({
  examTotalDuration: {
    type: Number,
    default: 0
  }
});

const { examCurrentDuration } = examDurationHook;

/**
 * 获取剩余时间
 */
const getExamTimeLeft = computed(() => {
  return formatTime(props.examTotalDuration * 60 - examCurrentDuration.value);
});

/**
 * 把秒格式化成时分秒 不足补0
 */
function formatTime(time: number) {
  const hours = Math.floor(time / 3600);
  const minutes = Math.floor((time % 3600) / 60);
  const seconds = time % 60;
  return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
}
</script>
<style scoped lang="scss">
.countdown-wrap {
  display: flex;
  align-content: center;
  justify-content: center;
  background-color: hsla(0, 0%, 100%, 0.9);
  font-size: 16px;
  padding: 7px;
  position: -webkit-sticky;
  position: sticky;
  text-align: center;
  top: 0;
  transition: top 0.3s;
  z-index: 999;
  align-items: center;
  color: var(--el-text-color-primary);
}
</style>
